<template>
<div class="container">
    <div class="right button" @click="add($event,1)">+1</div>
    <div class="left button" data-num="-1" @click="addMark">-1</div>
</div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    components: {},
    mounted() {
        console.log("首页mounted执行")
        const userinfo = wx.getStorageSync('userinfo')
        if (!userinfo.openid) {
            wx.switchTab({
                url: '/pages/me/main'
            })
        }
    },
    methods: {
        add(event, num) {
            console.info("add函数：", event, num)
            const userinfo = wx.getStorageSync('userinfo')
            wx.cloud.callFunction({
                name: 'createLog',
                data: {
                    add: num,
                    date: Date.now(),
                    openid: userinfo.openid
                },
                success: res => {
                    console.info("createLog调用成功", res)
                },
                fail: res => {
                    console.info("createLog调用失败", res)
                }
            })
        },
        addMark(event) {
            console.info("addMark点击事件：", event.target.dataset.num)
            const add = event.target.dataset.num
            const userinfo = wx.getStorageSync('userinfo')
            wx.cloud.callFunction({
                name: 'createLog',
                data: {
                    add: add,
                    date: Date.now(),
                    openid: userinfo.openid
                },
                success: res => {
                    console.info("createLog调用成功", res)
                },
                fail: res => {
                    console.info("createLog调用失败", res)
                }
            })
        }
    },

    created() {}
}
</script>

<style scoped>
.button {
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 20%;
    border: none;
    text-align: center;
    font-size: 25px;
    color: #FFFFFF;
    font-weight: bold;
    margin-top: 50px;
}

.right {
    background: #EA5149;
    float: right;
}

.left {
    background: #feb600;
}
</style>
